<html lang="en" xmlns:th="https://www.thymeleaf.org/">
<html>
<head>
    <title>管理系统主窗口</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/bootstrap-4.6.2-dist/css/bootstrap.min.css">

</head>
<body>

<div class="container container-fluid">
    <div class="row h-10 bg-info" >
        <div class="col-3">
            <img src="/static/bootstrap-4.6.2-dist/img/logo.png" alt="" height="60px">
            我们的超市
        </div>
        <div class="col-6"></div>
        <div class="col-3">
            当前用户: <span th:text="${username}"></span>
            <a class="btn btn-danger" href="/logout">退出</a>
        </div>
    </div>

    <div class="row h-100">
        <div class="col-3 bg-light pl-0 pr-0">
            <a href="/goods" class="list-group-item active">商品信息</a>
            <a href="/sales" class="list-group-item">销售管理</a>
            <a href="/inventory" class="list-group-item">进货管理</a>
            <a href="/category" class="list-group-item ">商品分类</a>
            <a href="/supplier" class="list-group-item">供应商管理</a>
            <a href="/sysuser" class="list-group-item">系统用户管理</a>
        </div>
        <div class="col-9 bg-light">

            <!--            <%&#45;&#45;首先来一个面包屑导航，说明当前位置&#45;&#45;%>-->
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/main">首页</a></li>
                    <li class="breadcrumb-item"><a href="#">商品管理</a></li>
                    <li class="breadcrumb-item active" aria-current="page">商品列表</li>
                </ol>
            </nav>
            <!--            <%&#45;&#45;    增加一行，用于检索和新增  &#45;&#45;%>-->
            <div class="row mb-1">
                <div class="col-3">
                </div>
                <div class="col-7">
                    <div class="input-group text-right" style="font-size: 14px">
                        <form action="/goods/search" method="post" class="form-group form-inline" role="form">
                            <input type="search" class="form-control " name="keyword" placeholder="输入内容">
                            <input type="submit" class="form-control bg-info ml-1" value="搜索">
                        </form>
                    </div>
                </div>
                <div class="col-2">
                    <a class="btn btn-primary" data-toggle="modal" data-target="#myModal">新增</a>
                </div>
            </div>
            <!--            <%&#45;&#45;            显示真正的分类列表内容,这里使用bootstrap的表格&#45;&#45;%>-->
            <table class="table table-bordered table-hover" style="font-size: 14px !important;">
                <!--                <%&#45;&#45;                给出表头显示&#45;&#45;%>-->
                <thead>
                <tr>
                    <th scope="col">序号</th>
                    <th scope="col">商品名</th>
                    <th scope="col">商品成本价</th>
                    <th scope="col">现有数量</th>
                    <th scope="col">所属分类</th>
                    <th scope="col">供应商</th>
                    <th scope="col">管理</th>
                </tr>
                </thead>
                <tbody>
                <!--                <%&#45;&#45;  这使用theymeleaf来获取数据示&#45;&#45;%>-->
                <tr th:each="goods:${data}">
                    <td th:text="${goods.getId()}"></td>
                    <td th:text="${goods.getName()}"></td>
                    <td th:text="${goods.getPrice()}"></td>
                    <td th:text="${goods.getQuantity()}"></td>
                    <td th:text="${goods.getCategory()}"></td>
                    <td th:text="${goods.getSupplier()}"></td>
                    <td style="font-size: 12px !important;">
                        <a class="btn btn-danger" data-toggle="modal" data-target="#myModalDelete" th:onclick="deleteID([[${goods.getId()}]])">删除</a>
                        <a class="btn btn-success" data-toggle="modal" data-target="#myModalUpdate" th:onclick="updateID([[${goods.getId()}]],[[${goods.getName()}]])">更新</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<!--新增 增加模态框-->
<!-- 模态框（Modal） -->
<!--<%&#45;&#45; 添加新增记录窗口 &#45;&#45;%>-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    新增商品信息
                </h4>
            </div>
            <div class="modal-body">
                <!--                <%&#45;&#45;    使用bootstrap表单方式设计好供应商信息输入表单  &#45;&#45;%>-->
                <div class="row ml-4">
                    <div class="form-horizontal">
                        <div class="form-group form-inline">
                            <label for="name">请输入商品名称：</label>
                            <input type="text" name="name" id="name" class="form-control" required="required">
                        </div>
                        <div class="form-group form-inline">
                            <label for="price">请输入商品价格：</label>
                            <input type="text" name="price" class="form-control" required="required">
                        </div>
                        <div class="form-group form-inline">
                            <label for="quantity">请输入商品数量：</label>
                            <input type="text" name="quantity" class="form-control" required="required">
                        </div>
                        <div class="form-group form-inline">
                            <label for="category">请选择商品种类：</label>
                            <select name="category" id="catoryList">
                                <option></option>
                            </select>
                        </div>
                        <div class="form-group form-inline">
                            <label for="supplier">请输入商品供应商：</label>
                            <input type="text" name="supplier" class="form-control" required="required">
                        </div>
                        <div class="form-group text-center">
                            <input type="button" value="提交" class="btn btn-danger" id="btnSubmit">
                            <input value="关闭" type="reset" class="btn btn-info" data-dismiss="modal">
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--<%&#45;&#45;添加删除模块框&#45;&#45;%>-->
<div class="modal fade" id="myModalDelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel2">
                    确认删除该商品信息？
                </h4>
            </div>
            <div class="modal-body">
                <!--                <%&#45;&#45;    使用bootstrap表单方式设计好供应商信息输入表单  &#45;&#45;%>-->
                <div class="row ml-4">
                    <div class="form-horizontal">
                        <!--                        <%&#45;&#45;必须要加一个隐藏的表单输入 ，这样绑定了该记录的id &#45;&#45;%>-->
                        <input type="hidden" id="goodsDeleteID" name="id">
                        <div class="form-group text-center">
                            <input type="button" value="删除" id="btnDelete" class="btn btn-danger">
                            <input value="取消" type="reset" class="btn btn-info" data-dismiss="modal">
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</body>
</html>
<script src="/static/bootstrap-4.6.2-dist/js/jquery.js"></script>
<script type="text/javascript" src="/static/bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
<script>
    // <%--    当点击删除按钮时，先弹出确认框-确认删除再执行删除操作  --%>
    function deleteID(id){
        console.log(id);
        $('#goodsDeleteID').val(id);
    }
    // <%--    当点击更新按钮时就将传递过来的参数赋值给模态框里的对应输入框 --%>
    function updateID(id,name){
        $('#goodsUpdateID').val(id);
        $('#name').val(name);
    }
//  加载时获取种类列表
    $.get("/category/CategoryNameList",function(res){
        var arr = Object.keys(res);
       var values=Object.values(res);
        for (let i = 0; i < arr.length; i++) {
             $('#catoryList').append("<option value='"+values[i]+"'>"+values[i]+"</option>");
        }
    })

    $('#btnSubmit').click(function(){
        var parameters={};
        parameters.name = $('input[name="name"]').val();
        parameters.price = $("input[name='price']").val();
        parameters.quantity = $("input[name='quantity']").val();
        parameters.category = $("#catoryList").val();
        parameters.supplier = $("input[name='supplier']").val();

        $.post("/goods/addGoods",parameters,function(res){
            console.log(res)
            if(res==1){
                alert("添加成功");
                location.href="/goods";
            }else{
                alert("添加失败");
                location.href="/goods";
            }
        })
    })
    //删除商品
    $('#btnDelete').click(function(){
        var parameters={};
        parameters.id = $('#goodsDeleteID').val();

        $.post("/goods/deleteGoods",parameters,function(res){
            console.log(res)
            if(res==1){
                alert("删除成功");
                location.href="/goods";
            }else{
                alert("删除失败");
                location.href="/goods";
            }
        })
    })

</script>

</body>
</html>